<template>
  <!-- 财务审核 -->
  <div class="containerPage">
    <!-- <u-navbar title="财务审核" :bgColor="navbarClass.titleBgColor" @leftClick="backHome" :placeholder="true"> </u-navbar> -->
    <!-- 内容 -->
    <div class="content">
      <div class="headSea">
        <!-- <div class="time" @click="datetimeShow = !datetimeShow">
            <span>{{ currentDate }}</span>
            <img src="@/static/image/webApp/bott.png" alt="" />
          </div> -->
        <div class="inputSea">
          <img src="@/static/image/webApp/搜索.png" alt="" />
          <input v-model="financeTitle" type="text" placeholder="请输入关键字" />
          <span class="spanTxt" @click="findFinanceReq(true)">搜索</span>
        </div>
      </div>
      <div class="selBox">
        <div class="selTab">
          <div class="tabItem" :class="{ tabActive: item.key == activeIndex }" v-for="(item, index) in tabArr" :key="index" @click="setActiveIndex(item.key)">
            {{ item.val }}
          </div>
        </div>
        <div class="screenIcon" :class="{ coll: selectActiveItArr.length }" @click="openScreenCun">
          <span>筛选</span>
          <img v-if="selectActiveItArr.length" src="@/static/image/webApp/筛选1.png" alt="" />
          <img v-else src="@/static/image/webApp/筛选.png" alt="" />
        </div>
      </div>

      <div v-if="!loadingHead">
        <div class="financeList" v-if="financeAuditVos.length">
          <div class="financeItem" v-for="(item, index) in financeAuditVos" :key="index" @click="gotoFinanceMessagePage(item)">
            <view class="cont">
              <div class="contitle">
                <div class="tit">{{ item.financeTitle }}</div>
                <span class="spanc" :class="{ spansq: item.areaType == 1 }">
                  {{ item.areaType == 1 ? '社区' : '村' }}
                </span>
              </div>
              <div class="times">报表时间：{{ item.createTime }}</div>
            </view>
          </div>
        </div>
        <div class="noData" v-else>
          <img class="image1" src="@/static/image/webApp/tip1.png" alt="" />
        </div>
      </div>
      <div class="loading" v-if="loadingHead">
        <u-loading-icon textSize="18"></u-loading-icon>
      </div>
    </div>
    <!-- 筛选弹出层 -->
    <u-popup mode="bottom" :show="popupShow" @close="popupShow = false">
      <div class="poptitle">
        <span>全部筛选</span>
        <img @click="popupShow = !popupShow" src="@/static/image/webApp/close00.png" alt="" />
      </div>
      <div class="popCont">
        <template v-if="activeIndex != 1">
          <div class="lab" v-if="dataBloackPojo1.length > 0">村</div>
          <div class="labList">
            <div class="cardItem" :class="{ activeIt: selectActiveItArr.indexOf(item.id) != -1 }" v-for="(item, index) in dataBloackPojo1" :key="index" @click="setSelectCard(item)">
              {{ item.areaName }}
            </div>
          </div>
        </template>
        <template v-if="activeIndex != 2">
          <div class="lab" v-if="dataBloackPojo2.length > 0">社区</div>
          <div class="labList">
            <div class="cardItem" v-for="(item, index) in dataBloackPojo2" :class="{ activeIt: selectActiveItArr.indexOf(item.id) != -1 }" :key="index" @click="setSelectCard(item)">
              {{ item.areaName }}
            </div>
          </div>
        </template>
      </div>
      <div class="popBtns">
        <div class="btns info" @click="selectActiveItArr = []">重置</div>
        <div class="btns" @click="findFinanceReq(true)">确定</div>
      </div>
    </u-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popupShow: false,
      datetimeShow: false,
      listLoading: false,
      loadingHead: true,
      activeIndex: 0,
      tabArr: [
        {
          key: 0,
          val: '全部',
        },
        {
          key: 2,
          val: '村报表',
        },
        {
          key: 1,
          val: '社区报表',
        },
      ],
      userinfo: {},
      sq: [2, 4, 6, 7, 8],
      cun: [1, 3, 5, 7, 8],
      financeAuditVos: [],
      currentDate: '',
      financeTitle: '',
      totalSize: 0,
      selectActiveItArr: [],
      searchForm: {
        page: 0,
        limit: 200,
        financeTitle: '',
        month: '',
        oneType: '',
        twoType: '',
      },
      dataBloackPojo1: [],
      dataBloackPojo2: [],
    }
  },

  onLoad() {
    // this.findFinanceReq()
    this.findFinanceReq(true)
    this.userinfo = JSON.parse(uni.getStorageSync('dtUsersVo'))
    if (this.userinfo.userMaxRole == 1 || this.userinfo.userMaxRole == 3 || this.userinfo.userMaxRole == 5) {
      this.tabArr = [
        {
          key: 2,
          val: '村报表',
        },
      ]
      this.activeIndex = 2
    } else if (this.userinfo.userMaxRole == 2 || this.userinfo.userMaxRole == 4 || this.userinfo.userMaxRole == 6) {
      this.tabArr = [
        {
          key: 1,
          val: '社区报表',
        },
      ]
      this.activeIndex = 1
    } else if (this.userinfo.userMaxRole == 7 || this.userinfo.userMaxRole == 8) {
      this.tabArr = [
        {
          key: 0,
          val: '全部',
        },
        {
          key: 2,
          val: '村报表',
        },
        {
          key: 1,
          val: '社区报表',
        },
      ]
      this.activeIndex = 0
    }
  },

  methods: {
    // 查询列表数据
    findFinanceReq(flay) {
      if (flay) {
        this.loadingHead = true
        this.financeAuditVos = []
        this.searchForm = {
          page: 1,
          limit: 200,
          financeTitle: this.financeTitle,
          month: '',
          oneType: this.activeIndex ? (this.activeIndex == 1 ? '16' : '3') : '',
          twoType: this.selectActiveItArr.join(','),
        }
      }
      this.$https
        .post({
          url: '/axh/findFinanceListAndSizeByReq',
          data: this.searchForm,
        })
        .then((res) => {
          this.financeAuditVos = [...this.financeAuditVos, ...res.result.financeAuditVos]
          this.totalSize = res.result.currentStatusSize
          this.popupShow = false
          this.listLoading = false
          this.loadingHead = false
          if (res.result.financeAuditVos.length < 10) {
          }
        })
    },
    // 打开村筛选
    openScreenCun() {
      if (this.cun.indexOf(this.userinfo.userMaxRole) != -1 && this.dataBloackPojo1.length <= 0) {
        this.findDataBlackList(3)
      }
      if (this.sq.indexOf(this.userinfo.userMaxRole) != -1 && this.dataBloackPojo2.length <= 0) {
        this.findDataBlackList(16)
      }
      this.popupShow = true
    },
    // 筛选村社区
    findDataBlackList(valType) {
      this.$https
        .post({
          url: '/axh/findPublicSort',
          data: {
            phoneAuth: 1,
            type: valType,
            monthData: '',
          },
        })
        .then((res) => {
          if (valType == 3) {
            // 村
            this.dataBloackPojo1 = res.result || []
          } else {
            // 社区
            this.dataBloackPojo2 = res.result || []
          }
        })
    },
    // 选择筛选的村社区
    setSelectCard(item) {
      let indexId = this.selectActiveItArr.indexOf(item.id)
      if (indexId == -1) {
        this.selectActiveItArr.push(item.id)
      } else {
        this.selectActiveItArr.splice(indexId, 1)
      }
    },
    // 确定选择时间
    // timeConfirm(e) {
    //   this.currentDate = this.formatDate(e, 'yyyy-MM')
    //   this.datetimeShow = false
    //   this.findFinanceReq(true)
    // },
    // 选项时间格式化
    formatter(type, val) {
      if (type === 'year') {
        return val + '年'
      }
      if (type === 'month') {
        return val + '月'
      }
      if (type === 'day') {
        return val + '日'
      }
      return val
    },
    setActiveIndex(index) {
      if (this.activeIndex == index) return
      this.activeIndex = index
      this.selectActiveItArr = []
      this.findFinanceReq(true)
    },
    // 跳转详情页
    gotoFinanceMessagePage(item) {
      if (this.right) return
      uni.navigateTo({
        url: `/pageContent/finance/financeMessage?id=${item.id}&from=financialreview`,
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.containerPage {
  background-color: #f9f9f9;
  min-height: 100vh;

  .content {
    width: 100%;
    .loading {
      width: 120rpx;
      margin: 0 auto;
      padding-top: 100px;
    }
    .headSea {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 24rpx 32rpx 16rpx;
      .time {
        display: flex;
        align-items: center;
        width: 170rpx;
        margin-right: 16rpx;
        font-size: 32rpx;
        img {
          width: 36rpx;
          height: 36rpx;
          transform: translate(4rpx, -2rpx);
        }
      }
      .inputSea {
        display: flex;
        align-items: center;
        width: 100%;
        height: 60rpx;
        background: #f3f5f7;
        border-radius: 8rpx;
        img {
          width: 30rpx;
          height: 30rpx;
          margin-left: 16rpx;
        }
        input {
          box-sizing: border-box;
          border: none;
          flex: 1;
          width: 0;
          font-size: 26rpx;
          padding: 0 16rpx;
          background: #f3f5f7;
        }
        .spanTxt {
          width: 70rpx;
          font-size: 26rpx;
          border-left: 2px solid #c3c3c3;
          padding-left: 16rpx;
          line-height: 28rpx;
        }
      }
    }
    .selBox {
      display: flex;
      align-items: center;
      padding: 0 8rpx;
      background-color: #fff;
      .screenIcon {
        display: flex;
        font-size: 24rpx;
        align-items: center;
        img {
          width: 20rpx;
          height: 20rpx;
          margin-left: 2px;
        }
      }
      .coll {
        color: #2c83e4;
      }
      .selTab {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        height: 68rpx;
        font-size: 28rpx;
        color: #999999;
        width: 620rpx;
        padding-right: 20rpx;

        .tabItem {
          padding: 0 28rpx;
        }
        .tabActive {
          position: relative;
          color: #2c83e4;
          &::after {
            content: '';
            position: absolute;
            bottom: -6rpx;
            left: 50%;
            transform: translateX(-50%);
            width: 32rpx;
            height: 6rpx;
            border-radius: 20rpx;
            background: #2c83e4;
          }
        }
      }
    }

    .financeList {
      width: 100%;
      .financeItem {
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 136rpx;
        margin-top: 16rpx;

        .cont {
          box-sizing: border-box;
          position: absolute;
          top: 0;
          // left: -1.2rpx;
          padding: 24rpx 32rpx;
          right: 0;
          width: 100%;
          height: 136rpx;
          background-color: #fff;
          .contitle {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10rpx;
            .tit {
              color: #35353f;
              font-size: 28rpx;
            }
            .spanc {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 84rpx;
              height: 36rpx;
              font-size: 22rpx;
              border-radius: 4rpx;
              color: #2c83e4;
              border: 1px solid #2c83e4;
            }
            .spansq {
              border: 1px solid #ed7b07;
              color: #ed7b07;
            }
          }
          .times {
            color: #999999;
          }
        }

        .del {
          box-sizing: border-box;
          display: flex;
          background: #2c83e4;
          height: 136rpx;
          width: 120rpx;
          color: #fff;
          font-size: 28rpx;
          padding: 26rpx 32rpx;
          align-items: center;
          justify-content: center;
        }
      }

      .noData {
        margin-top: 250rpx;
        display: flex;
        flex-direction: column;
        align-items: center;

        .image1 {
          width: 525rpx;
          height: 404rpx;
        }
        .image2 {
          margin-top: 150rpx;
          width: 580rpx;
          height: 196rpx;
        }
      }
    }
  }

  .poptitle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 74rpx;
    font-size: 32rpx;
    color: #35353f;
    img {
      position: absolute;
      right: 32rpx;
      top: 22rpx;
      width: 32rpx;
      height: 32rpx;
    }
  }
  .popCont {
    padding: 0 32rpx;
    overflow-y: auto;
    max-height: 400px;
    min-height: 300px;
    .lab {
      padding: 24rpx 0 16rpx 0;
      font-size: 28rpx;
    }
    .labList {
      display: flex;
      flex-wrap: wrap;
      .cardItem {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 204rpx;
        height: 74rpx;
        font-size: 24rpx;
        color: #585858;
        border-radius: 8rpx;
        background: #f5f5f5;
        margin: 0 37rpx 24rpx 0;
        &:nth-child(3n) {
          margin-right: 0;
        }
      }
      .activeIt {
        position: relative;
        background: #f0f5ff;
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          background: url('../../static/image/webApp/选中.png') no-repeat;
          background-size: 100% 100%;
          width: 30rpx;
          height: 30rpx;
        }
      }
    }
  }
  .popBtns {
    display: flex;
    padding: 24rpx 32rpx;
    border-top: 1px solid #d5c3c3;
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      width: 327rpx;
      height: 80rpx;
      background: #2c83e4;
      border-radius: 80rpx;
      color: #fff;
    }
    .info {
      background-color: #fff;
      color: #35353f;
      border: 1px solid #999999;
      margin-right: 32rpx;
    }
  }

  .noData {
    width: 100%;
    margin-top: 250rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    .image1 {
      width: 525rpx;
      height: 404rpx;
    }
  }
}
</style>
